window.onload = function () {
  ShopCart('cart', [
    { name: 'JavaScript程序设计', price: 45.8, num: 1 },
    { name: 'PHP基础案例教程', price: 49.8, num: 1 },
    { name: 'HTML+CSS网页制作', price: 35.2, num: 1 },
    { name: 'Java程序设计', price: 55, num: 1 },
  ]);
}

/**
 * ShopCart 商品购物车对象
 * @param {String} prefix 前缀，代表html中classname的前缀
 * @param {Array} cartData 购物车的初始数据 [{name: '', price: 1, num: 1}]
 */
var ShopCart = function (prefix, cartData) {
  QueryElement.prototype.prefix = prefix;
  //新建购物车对象
  var cart = new Cart(document.getElementsByClassName(prefix)[0]);
  // 遍历购物车的列表项，把各列表项添加到购物车中
  for (var i in cartData) {
    cart.add(cartData[i]);
  }
  //更新购物车的总金额
  cart.updateTotal();
};

/**
 * Cart 购物车对象
 * @constructor
 * @param {Object} obj 购物车所属的元素
 */
function Cart(obj) {
  this.items = [];
  var query = new QueryElement(obj);
  this.all = query.className("all");//全选
  this.bottom = query.className("bottom");//底部
  this.num = query.className("total-num");//总的数量
  this.price = query.className("total-price");//总的价格
  this.item = query.className("item");//列表项元素
  this.item.parentNode.removeChild(this.item);
  var cart = this;
  this.all.onclick = function () {
    cart.checkAll();
  };
}

Cart.prototype = {
  add: function (data) {
    var tmp = this.item.cloneNode(true);
    var item = new Item(tmp, data);
    var cart = this;
    item.check.onclick = function () {
      cart.updateTotal();

    };
    item.add.onclick = function () {
      item.num.textContent = ++item.data.num;
      item.updateSubtotal();
      cart.updateTotal();
    };
    item.reduce.onclick = function () {
      if (item.data.num > 1) {
        item.num.textContent = --item.data.num;
        item.updateSubtotal();
        cart.updateTotal();
      } else {
        alert("至少选择1件，如果不需要，请直接删除");

      }
    };
    item.del.onclick = function () {
      if (confirm("你确定要删除此商品吗？")) {
        tmp.parentNode.removeChild(tmp);
        cart.del(item);
        cart.updateTotal();

      }
    };
    item.updateSubtotal();
    this.items.push(item);
    this.bottom.before(tmp);
  },
  del: function (item) {
    for (var i in this.items) {
      if (this.items[i] == item) {
        delete this.items[i];
      }
    }
  },
  updateTotal: function () {
    var num = 0, price = 0;
    for (var i in this.items) {
      var item = this.items[i];
      if (item.check.checked) {
        num += item.data.num * item.data.price;
      }
    }
    this.price.textContent = price.toFixed(2);
  },
  checkAll: function () {
    for (var i in this.this.items) {
      this.items[i].check.checked = true;
    }
    this.updateTotal();
  },
};
function Item(item, data) {
  var item = new QueryElement(item);
  this.check = item.className("check");
  this.name = item.className("name");
  this.price = item.className("price");
  this.num = item.className("num");
  this.add = item.className("add");

  this.reduce = item.className("reduce");
  this.subtotal = item.className("subtotal");
  this.del = item.className("del");

  this.data = data;
  this.name.textContent = data.name;
  this.price.textContent = data.price.toFixed(2);
  this.num.textContent = data.num;
}
Item.prototype = {
  updateSubtotal: function () {
    this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
  },
}
function QueryElement(obj) {
  this.obj = obj;
}
QueryElement.prototype = {
  prefix: "",
  className: function (className) {
    return this.obj.getElementsByClassName(this.prefix + "-" + className)[0];
  },
};